<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .main-404-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: white;
        color: black;
        font-family: arial, sans-serif;
        overflow: hidden;
    }

    .main-404-content {
        position: relative;
        width: 600px;
        max-width: 100%;
        margin: 20px;
        background: white;
        padding: 60px 40px;
        text-align: center;
        box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2);
        opacity: 0;
        animation: apparition 0.8s 1.2s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards;
    }
    .main-404-content p {
        font-size: 1.3rem;
        margin-top: 0;
        margin-bottom: 0.6rem;
        letter-spacing: 0.1rem;
        color: #595959;
    }
    .main-404-content p:last-child {
        margin-bottom: 0;
    }
    .main-404-content button {
        display: inline-block;
        margin-top: 2rem;
        padding: 0.5rem 1rem;
        border: 3px solid #595959;
        background: transparent;
        font-size: 1rem;
        color: #595959;
        text-decoration: none;
        cursor: pointer;
        font-weight: bold;
    }

    .main-404-particle {
        position: absolute;
        display: block;
        pointer-events: none;
    }
    .main-404-particle:nth-child(1) {
        top: 27.9855247286%;
        left: 34.9854227405%;
        font-size: 29px;
        filter: blur(0.02px);
        animation: 40s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(2) {
        top: 48.1927710843%;
        left: 5.8252427184%;
        font-size: 30px;
        filter: blur(0.04px);
        animation: 25s floatReverse infinite;
    }
    .main-404-particle:nth-child(3) {
        top: 31.9612590799%;
        left: 39.9610136452%;
        font-size: 26px;
        filter: blur(0.06px);
        animation: 35s floatReverse infinite;
    }
    .main-404-particle:nth-child(4) {
        top: 25.458996328%;
        left: 8.8495575221%;
        font-size: 17px;
        filter: blur(0.08px);
        animation: 34s float infinite;
    }
    .main-404-particle:nth-child(5) {
        top: 25.2121212121%;
        left: 64.3902439024%;
        font-size: 25px;
        filter: blur(0.1px);
        animation: 34s float2 infinite;
    }
    .main-404-particle:nth-child(6) {
        top: 6.7632850242%;
        left: 51.5564202335%;
        font-size: 28px;
        filter: blur(0.12px);
        animation: 24s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(7) {
        top: 33.4975369458%;
        left: 57.3122529644%;
        font-size: 12px;
        filter: blur(0.14px);
        animation: 34s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(8) {
        top: 12.7921279213%;
        left: 80.9476801579%;
        font-size: 13px;
        filter: blur(0.16px);
        animation: 23s float2 infinite;
    }
    .main-404-particle:nth-child(9) {
        top: 20.5882352941%;
        left: 51.1811023622%;
        font-size: 16px;
        filter: blur(0.18px);
        animation: 30s float infinite;
    }
    .main-404-particle:nth-child(10) {
        top: 50.2415458937%;
        left: 76.8482490272%;
        font-size: 28px;
        filter: blur(0.2px);
        animation: 35s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(11) {
        top: 75.5828220859%;
        left: 0.9852216749%;
        font-size: 15px;
        filter: blur(0.22px);
        animation: 34s float2 infinite;
    }
    .main-404-particle:nth-child(12) {
        top: 11.6646415553%;
        left: 20.5278592375%;
        font-size: 23px;
        filter: blur(0.24px);
        animation: 26s floatReverse infinite;
    }
    .main-404-particle:nth-child(13) {
        top: 83.1295843521%;
        left: 79.5677799607%;
        font-size: 18px;
        filter: blur(0.26px);
        animation: 39s float2 infinite;
    }
    .main-404-particle:nth-child(14) {
        top: 28.5362853629%;
        left: 7.8973346496%;
        font-size: 13px;
        filter: blur(0.28px);
        animation: 40s floatReverse infinite;
    }
    .main-404-particle:nth-child(15) {
        top: 45.8536585366%;
        left: 40.1960784314%;
        font-size: 20px;
        filter: blur(0.3px);
        animation: 24s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(16) {
        top: 14.5808019441%;
        left: 12.7077223851%;
        font-size: 23px;
        filter: blur(0.32px);
        animation: 24s float2 infinite;
    }
    .main-404-particle:nth-child(17) {
        top: 86.4077669903%;
        left: 3.90625%;
        font-size: 24px;
        filter: blur(0.34px);
        animation: 21s floatReverse infinite;
    }
    .main-404-particle:nth-child(18) {
        top: 27.3838630807%;
        left: 9.8231827112%;
        font-size: 18px;
        filter: blur(0.36px);
        animation: 35s floatReverse infinite;
    }
    .main-404-particle:nth-child(19) {
        top: 32.3529411765%;
        left: 69.8818897638%;
        font-size: 16px;
        filter: blur(0.38px);
        animation: 33s float infinite;
    }
    .main-404-particle:nth-child(20) {
        top: 56.0885608856%;
        left: 36.5251727542%;
        font-size: 13px;
        filter: blur(0.4px);
        animation: 30s floatReverse infinite;
    }
    .main-404-particle:nth-child(21) {
        top: 37.3006134969%;
        left: 74.8768472906%;
        font-size: 15px;
        filter: blur(0.42px);
        animation: 26s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(22) {
        top: 43.530834341%;
        left: 12.6582278481%;
        font-size: 27px;
        filter: blur(0.44px);
        animation: 33s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(23) {
        top: 51.2315270936%;
        left: 83.9920948617%;
        font-size: 12px;
        filter: blur(0.46px);
        animation: 40s float2 infinite;
    }
    .main-404-particle:nth-child(24) {
        top: 95.145631068%;
        left: 84.9609375%;
        font-size: 24px;
        filter: blur(0.48px);
        animation: 36s floatReverse infinite;
    }
    .main-404-particle:nth-child(25) {
        top: 75.1219512195%;
        left: 26.4705882353%;
        font-size: 20px;
        filter: blur(0.5px);
        animation: 32s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(26) {
        top: 87.3786407767%;
        left: 88.8671875%;
        font-size: 24px;
        filter: blur(0.52px);
        animation: 30s float2 infinite;
    }
    .main-404-particle:nth-child(27) {
        top: 60.487804878%;
        left: 89.2156862745%;
        font-size: 20px;
        filter: blur(0.54px);
        animation: 24s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(28) {
        top: 20.2898550725%;
        left: 24.3190661479%;
        font-size: 28px;
        filter: blur(0.56px);
        animation: 27s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(29) {
        top: 51.7073170732%;
        left: 49.0196078431%;
        font-size: 20px;
        filter: blur(0.58px);
        animation: 25s floatReverse infinite;
    }
    .main-404-particle:nth-child(30) {
        top: 1.9464720195%;
        left: 74.3639921722%;
        font-size: 22px;
        filter: blur(0.6px);
        animation: 26s float infinite;
    }
    .main-404-particle:nth-child(31) {
        top: 85.0241545894%;
        left: 24.3190661479%;
        font-size: 28px;
        filter: blur(0.62px);
        animation: 25s float2 infinite;
    }
    .main-404-particle:nth-child(32) {
        top: 25.6473489519%;
        left: 48.4668644906%;
        font-size: 11px;
        filter: blur(0.64px);
        animation: 22s float2 infinite;
    }
    .main-404-particle:nth-child(33) {
        top: 32.4324324324%;
        left: 25.641025641%;
        font-size: 14px;
        filter: blur(0.66px);
        animation: 39s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(34) {
        top: 4.8602673147%;
        left: 85.0439882698%;
        font-size: 23px;
        filter: blur(0.68px);
        animation: 40s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(35) {
        top: 16.7281672817%;
        left: 1.9743336624%;
        font-size: 13px;
        filter: blur(0.7px);
        animation: 37s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(36) {
        top: 10.8241082411%;
        left: 50.3455083909%;
        font-size: 13px;
        filter: blur(0.72px);
        animation: 38s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(37) {
        top: 81.9277108434%;
        left: 66.9902912621%;
        font-size: 30px;
        filter: blur(0.74px);
        animation: 38s floatReverse infinite;
    }
    .main-404-particle:nth-child(38) {
        top: 78.8321167883%;
        left: 81.2133072407%;
        font-size: 22px;
        filter: blur(0.76px);
        animation: 22s float2 infinite;
    }
    .main-404-particle:nth-child(39) {
        top: 23.3576642336%;
        left: 90.9980430528%;
        font-size: 22px;
        filter: blur(0.78px);
        animation: 35s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(40) {
        top: 83.7438423645%;
        left: 27.6679841897%;
        font-size: 12px;
        filter: blur(0.8px);
        animation: 36s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(41) {
        top: 83.8554216867%;
        left: 61.1650485437%;
        font-size: 30px;
        filter: blur(0.82px);
        animation: 29s float infinite;
    }
    .main-404-particle:nth-child(42) {
        top: 65.0246305419%;
        left: 66.2055335968%;
        font-size: 12px;
        filter: blur(0.84px);
        animation: 24s float infinite;
    }
    .main-404-particle:nth-child(43) {
        top: 54.4349939247%;
        left: 32.2580645161%;
        font-size: 23px;
        filter: blur(0.86px);
        animation: 31s float2 infinite;
    }
    .main-404-particle:nth-child(44) {
        top: 70.5882352941%;
        left: 90.5511811024%;
        font-size: 16px;
        filter: blur(0.88px);
        animation: 27s floatReverse infinite;
    }
    .main-404-particle:nth-child(45) {
        top: 46.3625154131%;
        left: 37.5865479723%;
        font-size: 11px;
        filter: blur(0.9px);
        animation: 29s float infinite;
    }
    .main-404-particle:nth-child(46) {
        top: 39.9512789281%;
        left: 91.0871694417%;
        font-size: 21px;
        filter: blur(0.92px);
        animation: 38s float infinite;
    }
    .main-404-particle:nth-child(47) {
        top: 15.6288156288%;
        left: 6.8694798822%;
        font-size: 19px;
        filter: blur(0.94px);
        animation: 30s floatReverse infinite;
    }
    .main-404-particle:nth-child(48) {
        top: 34.7406513872%;
        left: 93.2944606414%;
        font-size: 29px;
        filter: blur(0.96px);
        animation: 36s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(49) {
        top: 73.1707317073%;
        left: 73.5294117647%;
        font-size: 20px;
        filter: blur(0.98px);
        animation: 34s float infinite;
    }
    .main-404-particle:nth-child(50) {
        top: 16.4648910412%;
        left: 82.8460038986%;
        font-size: 26px;
        filter: blur(1px);
        animation: 29s float infinite;
    }
    .main-404-particle:nth-child(51) {
        top: 53.9877300613%;
        left: 74.8768472906%;
        font-size: 15px;
        filter: blur(1.02px);
        animation: 30s float2 infinite;
    }
    .main-404-particle:nth-child(52) {
        top: 28.5714285714%;
        left: 21.7391304348%;
        font-size: 12px;
        filter: blur(1.04px);
        animation: 30s floatReverse infinite;
    }
    .main-404-particle:nth-child(53) {
        top: 87.7108433735%;
        left: 27.1844660194%;
        font-size: 30px;
        filter: blur(1.06px);
        animation: 24s float2 infinite;
    }
    .main-404-particle:nth-child(54) {
        top: 11.5662650602%;
        left: 76.6990291262%;
        font-size: 30px;
        filter: blur(1.08px);
        animation: 21s float infinite;
    }
    .main-404-particle:nth-child(55) {
        top: 44.4981862152%;
        left: 79.8442064265%;
        font-size: 27px;
        filter: blur(1.1px);
        animation: 30s floatReverse infinite;
    }
    .main-404-particle:nth-child(56) {
        top: 17.4757281553%;
        left: 25.390625%;
        font-size: 24px;
        filter: blur(1.12px);
        animation: 29s float2 infinite;
    }
    .main-404-particle:nth-child(57) {
        top: 75.271411339%;
        left: 50.5344995141%;
        font-size: 29px;
        filter: blur(1.14px);
        animation: 35s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(58) {
        top: 62.8220858896%;
        left: 91.6256157635%;
        font-size: 15px;
        filter: blur(1.16px);
        animation: 26s float infinite;
    }
    .main-404-particle:nth-child(59) {
        top: 63.6474908201%;
        left: 36.3815142576%;
        font-size: 17px;
        filter: blur(1.18px);
        animation: 26s floatReverse infinite;
    }
    .main-404-particle:nth-child(60) {
        top: 36.8932038835%;
        left: 6.8359375%;
        font-size: 24px;
        filter: blur(1.2px);
        animation: 32s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(61) {
        top: 57.0725707257%;
        left: 41.4610069102%;
        font-size: 13px;
        filter: blur(1.22px);
        animation: 26s float2 infinite;
    }
    .main-404-particle:nth-child(62) {
        top: 87.2549019608%;
        left: 74.8031496063%;
        font-size: 16px;
        filter: blur(1.24px);
        animation: 40s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(63) {
        top: 23.4146341463%;
        left: 50%;
        font-size: 20px;
        filter: blur(1.26px);
        animation: 34s float2 infinite;
    }
    .main-404-particle:nth-child(64) {
        top: 88.7804878049%;
        left: 28.431372549%;
        font-size: 20px;
        filter: blur(1.28px);
        animation: 28s float infinite;
    }
    .main-404-particle:nth-child(65) {
        top: 84.4171779141%;
        left: 71.921182266%;
        font-size: 15px;
        filter: blur(1.3px);
        animation: 27s floatReverse infinite;
    }
    .main-404-particle:nth-child(66) {
        top: 30.9552599758%;
        left: 43.8169425511%;
        font-size: 27px;
        filter: blur(1.32px);
        animation: 36s floatReverse infinite;
    }
    .main-404-particle:nth-child(67) {
        top: 10.7975460123%;
        left: 22.6600985222%;
        font-size: 15px;
        filter: blur(1.34px);
        animation: 37s floatReverse infinite;
    }
    .main-404-particle:nth-child(68) {
        top: 34.398034398%;
        left: 27.6134122288%;
        font-size: 14px;
        filter: blur(1.36px);
        animation: 36s float2 infinite;
    }
    .main-404-particle:nth-child(69) {
        top: 88.5608856089%;
        left: 79.9605133268%;
        font-size: 13px;
        filter: blur(1.38px);
        animation: 27s floatReverse infinite;
    }
    .main-404-particle:nth-child(70) {
        top: 91.6256157635%;
        left: 52.371541502%;
        font-size: 12px;
        filter: blur(1.4px);
        animation: 25s floatReverse infinite;
    }
    .main-404-particle:nth-child(71) {
        top: 35.8353510896%;
        left: 70.1754385965%;
        font-size: 26px;
        filter: blur(1.42px);
        animation: 38s float infinite;
    }
    .main-404-particle:nth-child(72) {
        top: 20.3636363636%;
        left: 25.3658536585%;
        font-size: 25px;
        filter: blur(1.44px);
        animation: 40s float2 infinite;
    }
    .main-404-particle:nth-child(73) {
        top: 40.6779661017%;
        left: 60.4288499025%;
        font-size: 26px;
        filter: blur(1.46px);
        animation: 28s float infinite;
    }
    .main-404-particle:nth-child(74) {
        top: 68.5162846803%;
        left: 58.3090379009%;
        font-size: 29px;
        filter: blur(1.48px);
        animation: 33s float infinite;
    }
    .main-404-particle:nth-child(75) {
        top: 9.6852300242%;
        left: 9.746588694%;
        font-size: 26px;
        filter: blur(1.5px);
        animation: 28s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(76) {
        top: 87.061668682%;
        left: 34.0798442064%;
        font-size: 27px;
        filter: blur(1.52px);
        animation: 39s floatReverse infinite;
    }
    .main-404-particle:nth-child(77) {
        top: 39.7094430993%;
        left: 86.7446393762%;
        font-size: 26px;
        filter: blur(1.54px);
        animation: 35s floatReverse infinite;
    }
    .main-404-particle:nth-child(78) {
        top: 13.5757575758%;
        left: 42.9268292683%;
        font-size: 25px;
        filter: blur(1.56px);
        animation: 24s floatReverse2 infinite;
    }
    .main-404-particle:nth-child(79) {
        top: 0.9852216749%;
        left: 83.9920948617%;
        font-size: 12px;
        filter: blur(1.58px);
        animation: 31s float2 infinite;
    }
    .main-404-particle:nth-child(80) {
        top: 97.0588235294%;
        left: 80.7086614173%;
        font-size: 16px;
        filter: blur(1.6px);
        animation: 24s float infinite;
    }

    @keyframes apparition {
        from {
            opacity: 0;
            transform: translateY(100px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(180px);
        }
    }
    @keyframes floatReverse {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-180px);
        }
    }
    @keyframes float2 {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(28px);
        }
    }
    @keyframes floatReverse2 {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-28px);
        }
    }
</style>
<style>
    /*/////////////////// caveman */
    .caveman-404 {
        height: 300px;
        position: absolute;
        width: 250px;
    }

    .caveman-404:nth-child(1) {
        right: 90px;
        top: -200px;
    }

    .caveman-404:nth-child(2) {
        left: 90px;
        top: -200px;
        transform: rotateY(180deg);
    }

    .caveman-404-head {
        position: absolute;
        background-color: #13242C;
        border-radius: 50px;
        height: 140px;
        left: 60px;
        top: 25px;
        width: 65px;
    }
    .caveman-404-head:after, .caveman-404-head:before {
        content: "";
        position: absolute;
        background-color: #13242C;
        border-radius: 10px;
        height: 20px;
        width: 7px;
    }
    .caveman-404-head:after {
        left: 35px;
        top: -8px;
        transform: rotate(20deg);
    }
    .caveman-404-head:before {
        left: 30px;
        top: -8px;
        transform: rotate(-20deg);
    }
    .caveman-404-head .caveman-404-eye {
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        background-color: #EAB08C;
        border-radius: 50px;
        height: 16px;
        left: 45%;
        top: 40px;
        width: 48px;
    }
    .caveman-404-head .caveman-404-eye:after, .caveman-404-head .caveman-404-eye:before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #13242C;
        border-radius: 50%;
        height: 5px;
        width: 5px;
    }
    .caveman-404-head .caveman-404-eye:after {
        left: 5px;
    }
    .caveman-404-head .caveman-404-eye:before {
        right: 9px;
    }
    .caveman-404-head .caveman-404-eye .caveman-404-nose {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #D9766C;
        border-left: 8px solid rgba(19, 36, 44, 0.1);
        border-radius: 10px;
        box-sizing: border-box;
        height: 35px;
        left: 45%;
        top: 12px;
        width: 15px;
    }

    .caveman-404-shape {
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        border-radius: 50%;
        height: 140px;
        overflow: hidden;
        top: 70px;
        width: 140px;
    }
    .caveman-404-shape .circle {
        position: absolute;
        border-radius: 50%;
        height: 60px;
        width: 60px;
    }
    .caveman-404-shape .circle:after, .caveman-404-shape .circle:before {
        content: "";
        position: absolute;
        border-radius: 50%;
        height: 20px;
        width: 20px;
    }
    .caveman-404-shape .circle:after {
        left: 50px;
        top: 10px;
    }
    .caveman-404-shape .circle:before {
        left: 60px;
        top: 45px;
    }
    .caveman-404-shape .circle:nth-child(1) {
        left: -12px;
        top: 80px;
    }
    .caveman-404-shape .circle:nth-child(2) {
        right: 10px;
        top: 0px;
        transform: rotate(90deg);
    }
    .caveman-404-shape .circle:nth-child(2):after {
        left: 65px;
        top: 10px;
    }
    .caveman-404-shape .circle:nth-child(2):before {
        display: none;
    }

    .caveman-404:nth-child(1) .caveman-404-shape {
        background-color: #D13433;
    }
    .caveman-404:nth-child(1) .caveman-404-shape .circle {
        background-color: #932422;
    }
    .caveman-404:nth-child(1) .caveman-404-shape .circle:after, .caveman-404:nth-child(1) .caveman-404-shape .circle:before {
        background-color: #932422;
    }

    .caveman-404:nth-child(2) .caveman-404-shape {
        background-color: #932422;
    }
    .caveman-404:nth-child(2) .caveman-404-shape .circle {
        background-color: #D13433;
    }
    .caveman-404:nth-child(2) .caveman-404-shape .circle:after, .caveman-404:nth-child(2) .caveman-404-shape .circle:before {
        background-color: #D13433;
    }

    .arm-right {
        position: absolute;
        background-color: #EAB08C;
        border-left: 8px solid rgba(19, 36, 44, 0.1);
        border-radius: 50px;
        box-sizing: border-box;
        height: 180px;
        left: 135px;
        top: 80px;
        transform-origin: 30px 30px;
        width: 60px;
        z-index: 1;
    }
    .arm-right .club {
        position: absolute;
        border-bottom: 110px solid #601513;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        height: 0;
        left: -60px;
        top: 120px;
        transform: rotate(70deg);
        width: 20px;
    }
    .arm-right .club:after, .arm-right .club:before {
        position: absolute;
        content: "";
        background-color: #601513;
        border-radius: 50%;
        left: 0;
    }
    .arm-right .club:after {
        height: 20px;
        width: 20px;
        top: -10px;
    }
    .arm-right .club:before {
        height: 40px;
        width: 40px;
        left: -10px;
        top: 90px;
    }

    .caveman-404-leg {
        position: absolute;
        border-radius: 10px;
        height: 55px;
        top: 200px;
        width: 10px;
    }
    .caveman-404-leg:after {
        position: absolute;
        content: "";
        border-radius: 50%;
        height: 10px;
        left: -5px;
        top: 15px;
        width: 10px;
    }
    .caveman-404-leg .foot {
        position: absolute;
        border-radius: 25px 25px 0 0;
        height: 25px;
        left: -38px;
        top: 30px;
        width: 50px;
    }
    .caveman-404-leg .foot:after, .caveman-404-leg .foot:before, .caveman-404-leg .foot .fingers, .caveman-404-leg .foot .fingers:after {
        position: absolute;
        background-color: #EAB08C;
        border-radius: 50%;
        bottom: 0px;
        height: 15px;
        transform-origin: bottom;
        width: 15px;
    }
    .caveman-404-leg .foot:after {
        left: -6px;
        content: "";
    }
    .caveman-404-leg .foot:before {
        left: 8px;
        transform: scale(0.6);
        content: "";
    }
    .caveman-404-leg .foot .fingers {
        left: 15px;
        transform: scale(0.6);
    }
    .caveman-404-leg .foot .fingers:after {
        left: 11px;
        content: "";
    }

    .caveman-404-leg:nth-child(1) {
        background-color: #B2524D;
        left: 95px;
    }
    .caveman-404-leg:nth-child(1):after {
        background-color: #B2524D;
    }
    .caveman-404-leg:nth-child(1) .foot {
        background-color: #B2524D;
    }
    .caveman-404-leg:nth-child(1) .foot:after {
        background-color: #B2524D;
    }
    .caveman-404-leg:nth-child(1) .foot:before {
        display: none;
    }

    .caveman-404-leg:nth-child(2) {
        background-color: #D9766C;
        left: 115px;
    }
    .caveman-404-leg:nth-child(2):after {
        background-color: #D9766C;
    }
    .caveman-404-leg:nth-child(2) .foot {
        background-color: #D9766C;
    }

    /*/////////////////// animation */
    .caveman-404:nth-child(1) .arm-right {
        animation: arm-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34);
    }

    .caveman-404:nth-child(2) .arm-right {
        animation: arm-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34);
        animation-delay: 0.6s;
    }

    @keyframes arm-anima {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(-360deg);
        }
    }
    .caveman-404:nth-child(2) .caveman-404-head {
        animation: head-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34);
    }

    .caveman-404:nth-child(1) .caveman-404-head {
        animation: head-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34);
        animation-delay: 0.6s;
    }

    @keyframes head-anima {
        0% {
            top: 25px;
        }
        42% {
            top: 25px;
        }
        45% {
            top: 50px;
        }
        100% {
            top: 25px;
        }
    }
    .caveman-404:nth-child(2) .caveman-404-eye:after,
    .caveman-404:nth-child(2) .caveman-404-eye:before {
        animation: eye-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34);
    }

    .caveman-404:nth-child(1) .caveman-404-eye:after,
    .caveman-404:nth-child(1) .caveman-404-eye:before {
        animation: eye-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34);
        animation-delay: 0.6s;
    }

    @keyframes eye-anima {
        0% {
            height: 5px;
        }
        42% {
            height: 5px;
        }
        45% {
            height: 1px;
        }
        100% {
            height: 5px;
        }
    }
    .container:after {
        animation: shadow-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34);
        animation-delay: 0.1s;
    }

    @keyframes shadow-anima {
        0% {
            width: 350px;
            left: 80px;
        }
        25% {
            width: 450px;
            left: 80px;
        }
        50% {
            width: 350px;
            left: 80px;
        }
        75% {
            width: 450px;
            left: 0px;
        }
        100% {
            width: 350px;
            left: 80px;
        }
    }
</style>
<body>
<main class='main-404-container'>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>4</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <span class='main-404-particle'>0</span>
    <article class='main-404-content'>

        <div >
            <!-- caveman left -->
            <div class="caveman-404">
                <div class="caveman-404-leg">
                    <div class="foot">
                        <div class="fingers"></div>
                    </div>
                </div>
                <div class="caveman-404-leg">
                    <div class="foot">
                        <div class="fingers"></div>
                    </div>
                </div>
                <div class="caveman-404-shape">
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
                <div class="caveman-404-head">
                    <div class="caveman-404-eye">
                        <div class="caveman-404-nose"></div>
                    </div>
                    <div class="caveman-404-mouth"></div>
                </div>
                <div class="arm-right">
                    <div class="club"></div>
                </div>
            </div>
            <!-- caveman right -->
            <div class="caveman-404">
                <div class="caveman-404-leg">
                    <div class="foot">
                        <div class="fingers"></div>
                    </div>
                </div>
                <div class="caveman-404-leg">
                    <div class="foot">
                        <div class="fingers"></div>
                    </div>
                </div>
                <div class="caveman-404-shape">
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
                <div class="caveman-404-head">
                    <div class="caveman-404-eye">
                        <div class="caveman-404-nose"></div>
                    </div>
                    <div class="mouth"></div>
                </div>
                <div class="arm-right">
                    <div class="club"></div>
                </div>
            </div>
        </div>
        <p>您访问的页面不存在 <strong>404</strong> </p>
        <p>
            <a href="../"><button>返回主页</button></a>
        </p>
    </article>
</main>

</body>
</html>
